<!--
 * @Descripttion: 商品详情
 * @version:
 * @Author: cxguo
 * @Date: 2019-08-17 20:26:23
 * @LastEditors: cxguo
 * @LastEditTime: 2020-12-24 22:08:56
 -->
<template>
  <div class="app-container paddingT50">
    <affix>
      <div class="paddingLR20 clearfix">
        <el-card shadow="never" class="oper-btn-card">
          <div class="clearfix">
            <el-button type="primary" size="medium" class="fl" :loading="btnLoading.save" @click="btnSave">保 存</el-button>
            <el-button type="default" size="medium" class="fl" @click="btnCancle">取 消</el-button>
          </div>
        </el-card>
      </div>
    </affix>
    <el-card shadow="never" class="border-radius-none margin-t2">
      <good-base ref="goodBase" />
      <good-unit ref="goodUnit" class="margin-t20" />
      <good-specs
        ref="goodSpecs"
        :base-data="baseData"
        :unit-data="unitData"
        :store-data="storeData"
        class="margin-t40"
        @on-sku-edit="onSkuEdit"
      />
      <stock-warn
        ref="stockWarn"
        class="margin-t20"
        :store-data="storeData"
      />
    </el-card>
    <el-drawer
      :visible="isShowDrawer"
      direction="rtl"
      size="1000px"
      :before-close="onBeforeClose"
      @close="onDrawerClose"
      @opened="onDrawerOpened"
    >
      <div slot="title" class="clearfix">
        <h3 class="w400 fl">{{ currentSkuData.name }}</h3>
        <el-button class="fr" type="primary" @click="btnDrawerSure">确 定</el-button>
      </div>
      <div class="wrapper">
        <sku-more
          ref="skuMore"
          :sku-data="currentSkuData"
          :unit-data="unitData"
        />
      </div>
    </el-drawer>
  </div>
</template>
<script>
import { addData } from '@/api/goods/goods'
import { oftenuse } from '@/libs/mixins'
import clonedeep from 'clonedeep'
import {
  Base as GoodBase,
  Specs as GoodSpecs,
  Unit as GoodUnit,
  StockWarn
} from './components'
import Affix from '@/components/Affix'
import SkuMore from './sku-more'
import { getDefaultPrice, getDefaultBarcode,
  getDefaultStock, getDefaultStockWarn } from './components/utils/export'
import store from '@/store'

export default {
  name: 'GoodAdd',
  components: { GoodBase, GoodSpecs, GoodUnit, SkuMore, StockWarn, Affix },
  mixins: [oftenuse],
  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      comps: {}, // 组件
      isShowDrawer: false,
      currentSkuData: {},
      storeData: [{}],
      priceTypes: store.getters.appData.configs.priceTypes
    }
  },
  computed: {
    /**
     * 基础数据
     */
    baseData: function() {
      const goodBaseComp = this.comps.goodBase
      if (!goodBaseComp) return {}
      return clonedeep(goodBaseComp.dataObj)
    },
    /**
     * 单位post数据
     */
    unitData: function() {
      const goodUnitComp = this.comps.goodUnit
      if (!goodUnitComp) return []
      else return goodUnitComp.getGoodUnitData()
    }
  },
  watch: {
  },
  created() {
    this.initData()
  },
  destroyed() {
  },
  updated() {
    this.setComponents()
  },
  mounted() {
    this.setComponents()
  },
  methods: {
    btnGetPostData() {
    },
    btnDrawerSure() {
      this.isShowDrawer = false
    },
    btnCancle() {
      this.jump2list()
    },
    btnSave(oper) {
      this.valiData().then(res => {
        const goodsSpu = this.comps.goodBase.getData()
        let goodSkuDtoList = this.comps.goodSpecs.getSpTableData()
        goodSkuDtoList = this.handleGoodSkuDtoList(goodSkuDtoList)
        const params = { goodsSpu, goodSkuAllInfoVoList: goodSkuDtoList }
        this.setBtnLoading('save', true)
        this.saveGoodData(params).then((res) => {
          this.setBtnLoading('save', false)
          if (!res.data.flag) return
          this.jump2list()
          if (oper === 'add') {
            this.resetData()
          }
        })
      })
    },
    jump2list() {
      this.closeCurrentTag(this.$route)
      this.$router.push({
        name: 'GoodsList',
        params: { refresh: true }
      })
    },
    handleGoodSkuDtoList(daraArr) {
      const unitData = this.unitData
      const storeData = this.storeData
      const priceTypes = this.priceTypes
      const stockWarns = this.$refs.stockWarn.getStockWarnData()
      const result = []
      daraArr.forEach(item => {
        const { barcodes, priceListData, stocks } = item
        const obj = {
          goodsSku: item,
          goodsStockList: stocks,
          goodsStockWarnList: stockWarns
        }
        this.$set(obj, 'goodsPriceList', getDefaultPrice(unitData, priceListData || [], priceTypes))
        this.$set(obj, 'goodsBarcodeList', getDefaultBarcode(unitData, barcodes || []))
        this.$set(obj, 'goodsUnitList', this.transUnitData(unitData))
        if (stocks.length === 0) this.$set(obj, 'goodsStockList', getDefaultStock(storeData))
        if (stockWarns.length === 0) this.$set(obj, 'goodsStockWarnList', getDefaultStockWarn(storeData))
        result.push(obj)
      })
      return result
    },
    transUnitData(unitData) {
      unitData.forEach(item => {
        item.unitId = item.value
      })
      return unitData
    },
    saveGoodData(params) {
      return new Promise((resolve, reject) => {
        addData(params).then(res => {
          resolve(res)
          const { title } = res.data
          if (!res.data.flag) return
          this.$notify.success({ title })
        }).catch(err => {
          reject(err)
        })
      })
    },
    valiData(callback) {
      const goodBaseComp = this.comps.goodBase
      const goodUnitComp = this.comps.goodUnit
      const goodSpecsComp = this.comps.goodSpecs
      const v1 = goodBaseComp.handleValid('goodBase')
      const v2 = new Promise((resolve, reject) => {
        if (!goodUnitComp) resolve()
        goodUnitComp.handleValid('goodUnit').then(_ => {
          resolve()
        }).catch(_ => {
          reject()
        })
      })
      const v3 = new Promise((resolve, reject) => {
        if (!goodSpecsComp) resolve()
        goodSpecsComp.valiData().then(_ => {
          resolve()
        }).catch(_ => {
          reject()
        })
      })
      const v4 = this.$refs.stockWarn.valiData()
      return Promise.all([v1, v2, v3, v4])
    },
    resetData() {
      const goodBaseComp = this.$refs.goodBase
      goodBaseComp.resetData()
    },
    setComponents: function() {
      this.$set(this.comps, 'goodBase', this.$refs.goodBase)
      this.$set(this.comps, 'goodUnit', this.$refs.goodUnit)
      this.$set(this.comps, 'goodSpecs', this.$refs.goodSpecs)
      this.$set(this.comps, 'goodPrice', this.$refs.goodPrice)
      this.$set(this.comps, 'goodStock', this.$refs.goodStock)
    },
    setSkuMoreData(skuData) {
      const skuMoreData = this.$refs.skuMore.getData()
      const { priceData, barcodeData, stockData, stockWarnData } = skuMoreData
      this.$set(skuData, 'goodspriceList', priceData)
      this.$set(skuData, 'goodsBarcodeList', barcodeData)
      this.$set(skuData, 'goodsStockList', stockData)
      this.$set(skuData, 'goodsStockWarnList', stockWarnData)
    },
    initData() {
    },
    onBeforeClose(hide) {
      hide()
    },
    onDrawerClose() {
      this.setSkuMoreData(this.currentSkuData)
    },
    onSkuEdit(row) {
      this.valiData().then(res => {
        this.currentSkuData = row
        this.isShowDrawer = true
      })
    },
    onDrawerOpened() {
    }
  }
}
</script>

<style scoped>
</style>
